<script setup>
import WOW from "wow.js";
import {ref, onMounted, reactive, onUpdated, defineProps, watch} from "vue";
import {useRouter, useRoute} from "vue-router";
import {getshop} from "../../api/index";
import {useCounterStore} from "../../pina/index";
const store = useCounterStore();
const prop = defineProps({
  msg: String,
  bac: {default: false},
});
console.log(prop.bac);
const router = useRouter();

const getdart = async () => {
  const {rows} = await getshop();
  tableData.d = rows;
  if (rows) {
    // store.incrementKey(rows[0])
  }
};

watch(
  () => router.currentRoute.value.path,
  (newValue, oldValue) => {
    console.log("watch", newValue);

    if (newValue == "/zhu/service") {
      getdart();
    }
  },
  {immediate: true}
);

const handleSelect = (e) => {
  console.log(e);
  router.push({
    name: `${e}`,
  });
};

const activeIndex2 = ref("service");

const shouq = () => {
  router.push({
    name: "authorization",
  });
};

let tableData = reactive({d: []});
</script>

<template>
  <div style="">
    <header
      class="header"
      style="display: flex; justify-content: space-between"
    >
      <div
        style="
          position: relative;
          width: 100%;
          height: calc(100vh - 70px);
          background-color: #fff;
          margin-left: 20px;
          border-radius: 10px;
          padding: 20px;
        "
      >
        <div
          style="
            width: 97%;
            position: absolute;
            z-index: 999;
            top: 20px;
            left: 20px;
            background-color: #fff;
          "
        >
          <router-view />
        </div>
      </div>
    </header>
  </div>
</template>

<style scoped>
.header {
  width: 100%;
}

:deep(.tableRowClassName .el-table__cell.is-leaf) {
  background: #eeeff3 !important;
  color: #000 !important;
}
.setSuccess {
  background: green !important;
  color: white !important;
}
.setHeight {
  color: blue !important;
}
</style>
